<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="<%= blog.description %>" />
    <meta name="keywords" content="<%= blog.keywords %>" />
    <meta name="baidu-site-verification" content="H91h9G7RRd" />
    <meta name="author" content="shixtao" />
    <link
      href="/public/ueditor/third-party/highlight/styles/atom-one-dark.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/public/home/css/bootstrap.css" />
    <link rel="stylesheet" href="/public/home/css/style.css" />
    <link rel="shortcut icon" href="/public/home/images/favicon.ico" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_1611091_sf4ghg5ts0i.css"
    />
    <style id="theme">
      .header,
      .nav-link {
        background: #5ecca9;
      }

      .list-inline-item .iconfont {
        color: #5ecca9;
      }

      .btn-primary {
        background: #5ecca9;
        border-color: #5ecca9;
      }

      .more-link {
        color: #5ecca9;
      }

      .pageBtn {
        border: 1px solid #5ecca9;
      }

      .currentBtn {
        background: #5ecca9;
        color: #fff;
      }
    </style>
    <!--[if lt IE 10]>
      <p style="text-align: center; color: red">
        您的浏览器版本过低，请使用更高版本的浏览器来获取更好的体验！ 使用<a
          href="http://www.google.cn/intl/zh-CN/chrome/"
          target="_blank"
          >Google Chrome</a
        >
      </p>
    <![endif]-->
    <title><%= blog.title %></title>
  </head>

  <body>
    <%- include('./public/header.html') %>
    <div class="main-wrapper">
      <article class="blog-post px-3 py-5 p-md-5">
        <div class="container">
          <header class="blog-post-header">
            <h2 class="title mb-2">
              <b><%= blog.title %></b>
            </h2>
            <div class="meta mb-3">
              <i class="iconfont icon-bokeyuan"></i>
              <span title="博客类型"
                ><%= blog.type %>&nbsp;
                <span title="博客分类">
                  <a class="text-info" href="/list?cid=<%= blog.cid %>"
                    ><%= list.name %></a
                  >
                </span>
              </span>
              <i class="iconfont icon-shizhong"></i>
              <span title="发表时间"><%= blog.time %></span>
              <i class="iconfont icon-renyuan"></i>
              <span title="博客作者"><%= blog.author %></span>
              <i class="iconfont icon-pinglun"></i>
              <span title="评论"
                ><a href="#form" id="comment_count"
                  ><span><%= blog.comment %></span>评论</a
                ></span
              >
              <i class="iconfont icon-liulan"></i>
              <span title="浏览量"><%= blog.click %></span>
            </div>
          </header>
          <!-- 内容区 -->
          <div class="blog-post-body"><%- blog.content %></div>
          <!-- 评论区编辑区 -->
          <% if(+blog.comment_status === 0 ){ %>
          <h4 class="comment">评论区</h4>
          <form id="form">
            <fieldset>
              <div class="form-group">
                <label
                  >输入大名：<input
                    type="text"
                    required
                    name="name"
                    maxlength="6"
                    id="name"
                /></label>
                <label
                  >选择头像：
                  <select
                    name="face"
                    onchange="document.images['face'].src=options[selectedIndex].value;"
                  >
                    <% for (let i = 1; i <= 8;i++) { %>
                    <option value="/public/home/images/p<%= i %>.png">
                      头像<%= i %>
                    </option>
                    <% } %>
                  </select>
                </label>
                <span
                  ><img
                    src="/public/home/images/p1.png"
                    id="face"
                    class="face"
                    alt="face"
                    width="50"
                    height="50"
                /></span>
                <textarea
                  name="comment"
                  rows="3"
                  class="form-control"
                  id="form-control"
                  maxlength="50"
                  placeholder="欢迎您留下宝贵的意见"
                ></textarea>
                <div class="emoji_box">
                  <% emoji.forEach(item => { %>
                  <span class="comment_emoji_item"><%= item %></span>
                  <% }) %>
                </div>
                <img
                  src="/public/home/images/笑脸.png"
                  alt="笑脸icon"
                  class="comment_smile_icon"
                />
              </div>
              <button type="submit" class="btn btn-primary" id="blog-btn">
                提交
              </button>
              <br /><br />
            </fieldset>
          </form>
          <!-- 评论展示区 -->
          <table class="table">
            <tbody>
              <% comments.forEach(comment => { %>
              <tr>
                <td>
                  <div class="touxiang">
                    <img
                      src="<%= comment.face %>"
                      alt="人物头像"
                      width="50"
                      height="50"
                    />
                    <div><%= comment.name %></div>
                  </div>
                  <div class="content">
                    <%= comment.content %>
                    <br />
                    <small><%= comment.time %></small>
                  </div>
                  <div class="floor">
                    <p onclick="alert('请联系作者！')">
                      <span style="cursor: pointer">举报</span>
                    </p>
                    <p>
                      <a
                        href="#<%= comment.id %>"
                        onclick="reply('<%= comment.id %>','<%= comment.id %>','<%= comment.name %>')"
                        >回复</a
                      >
                    </p>
                  </div>
                  <form id="<%= comment.id %>" style="display: none">
                    <fieldset>
                      <div class="form-group">
                        <label
                          >输入大名：<input type="text" required maxlength="6"
                        /></label>
                        <label
                          >选择头像：
                          <select
                            name="face"
                            onchange="document.images['<%= comment.id %>replyface'].src=options[selectedIndex].value;"
                          >
                            <% for (let i = 1; i <= 8;i++) { %>
                            <option value="/public/home/images/p<%= i %>.png">
                              头像<%= i %>
                            </option>
                            <% } %>
                          </select>
                        </label>
                        <span
                          ><img
                            src="/public/home/images/p1.png"
                            class="face"
                            alt="face"
                            width="50"
                            height="50"
                            id="<%= comment.id %>replyface"
                        /></span>
                        <textarea
                          rows="3"
                          class="form-control"
                          maxlength="50"
                          placeholder="回复区"
                        ></textarea>
                        <div class="emoji_box">
                          <% emoji.forEach(item => { %>
                          <span class="reply_emoji_item"><%= item %></span>
                          <% }) %>
                        </div>
                        <img
                          src="/public/home/images/笑脸.png"
                          alt="笑脸icon"
                          class="reply_smile_icon"
                        />
                      </div>
                      <button type="submit" class="btn btn-primary">
                        回复
                      </button>
                      <br /><br />
                    </fieldset>
                  </form>
                  <% replies.forEach(reply => { %> <% if(comment.id ===
                  reply.reply_id ) { %>
                  <div class="hf">
                    <div class="reply_area">
                      <span class="reply_info">
                        <img
                          src="<%= reply.face %>"
                          alt="人物头像"
                          width="50"
                          height="50"
                        />
                        <span
                          ><%= reply.name %><span class="text-info"
                            >&nbsp;回复&nbsp;</span
                          ><span><%= reply.reply_name %></span>:</span
                        >
                        </span>
                      <span class="reply_content">
                        <%= reply.content %><br />
                        <small><%= reply.time %></small>
                      </span>
                      <span style="float: right">
                        <p
                          onclick="alert('请联系作者！')"
                        >
                        <span style="cursor: pointer">举报</span>
                        </p>
                        <p>
                          <a
                            href="#<%= reply.id %>"
                            onclick="reply('<%= reply.id %>','<%= comment.id %>','<%= reply.name %>')"
                            >回复</a
                          >
                        </p>
                      </span>
                      <div class="replyedit">
                        <form id="<%= reply.id %>" style="display: none">
                          <fieldset>
                            <div class="form-group">
                              <label
                                >输入大名：<input
                                  type="text"
                                  required
                                  id="<%= reply.id %>name"
                                  maxlength="6"
                              /></label>
                              <label
                                >选择头像：
                                <select
                                  name="face"
                                  id="<%= reply.id %>replyface"
                                  onchange="document.images['<%= reply.id %>replyface'].src=options[selectedIndex].value;"
                                >
                                  <% for (let i = 1; i <= 8;i++) { %>
                                  <option value="/public/home/images/p<%= i %>.png">头像<%= i %></option>
                                  <% } %>
                                </select>
                              </label>
                              <span
                                ><img
                                  src="/public/home/images/p1.png"
                                  class="face"
                                  id="<%= reply.id %>replyface"
                                  alt="face"
                                  width="50"
                                  height="50"
                              /></span>
                              <textarea
                                id="<%= reply.id %>reply"
                                rows="3"
                                class="form-control"
                                maxlength="50"
                                placeholder="回复区"
                              ></textarea>
                              <div class="emoji_box">
                                <% emoji.forEach(item => { %>
                                <span class="reply_emoji_item2"
                                  ><%= item %></span
                                >
                                <% }) %>
                              </div>
                              <img
                                src="/public/home/images/笑脸.png"
                                alt="笑脸icon"
                                class="reply_smile_icon2"
                              />
                            </div>
                            <button type="submit" class="btn btn-primary">
                              回复
                            </button>
                            <br /><br />
                          </fieldset>
                        </form>
                      </div>
                    </div>
                  </div>
                  <% } %> <% }) %>
                </td>
              </tr>
              <% }) %>
            </tbody>
          </table>
          <% } else { %>
          <h4 class="comment">抱歉，评论功能已关闭！</h4>
          <% } %>
        </div>
      </article>
      <%- include('./public/footer.html') %>
    </div>
    <%- include('./public/color.html') %>
    <div
      class="toast"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-delay="2000"
      style="position: fixed; top: 20px; right: 20px"
    >
      <div class="toast-header">
        <strong class="mr-auto">通知</strong>
        <button
          type="button"
          class="ml-2 mb-1 close"
          data-dismiss="toast"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">评论成功！</div>
    </div>
    <%- include('./public/script.html') %>
    <script src="/public/ueditor/third-party/highlight/highlight.pack.js"></script>
    <script>
      // 代码高亮
      hljs.initHighlightingOnLoad();
      var allpre = document.querySelectorAll('pre');
      for (var i = 0; i < allpre.length; i++) {
        var onepre = document.querySelectorAll('pre')[i];
        var mycode = document.querySelectorAll('pre')[i].innerHTML;
        onepre.innerHTML = '<code id="mycode">' + mycode + '</code>';
      }
    </script>
  </body>
</html>
